<template>
	<view>
		<!-- 地址 -->
		<my-address></my-address>
		<!-- 购物车列表 -->
		<!-- 有数据时展示内容 -->
		<view class="cart" v-if="cart.length !== 0 ">
			<view class="cart-title">
				<uni-icons type="shop" size="20"></uni-icons>
				<text>购物车</text>
			</view>
			<!-- 列表 -->
			<view class="cart-list">
				<uni-swipe-action>
					<block v-for="item,index in cart" :key="index">
						<uni-swipe-action-item :right-options="options" @click="removeGoods(item)">
							<my-goods @num-change="numChange" :showNum="true" :goods="item" :showRadio="true"
								@radio-click="goodsStateChange">
							</my-goods>
						</uni-swipe-action-item>
					</block>
				</uni-swipe-action>
			</view>
			<!-- 结算 -->
			<view class="settle">
				<my-settle @all-radio-change="allRadioChange"></my-settle>
			</view>
		</view>

		<!-- 没有数据时展示的内容 -->
		<view v-else class="empty-box">
			<view class="image-box">
				<image src="/static/images/empty.png" mode=""></image>
			</view>
			<text>空空如耶~</text>
		</view>
	</view>
</template>

<script>
	import tabBarMixins from '../../mixins/tabBarMixins.js'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#ea4350',
						color: '#fff'
					}
				}]
			};
		},
		mixins: [tabBarMixins],
		computed: {
			...mapState('m_cart', ['cart'])
		},
		methods: {
			...mapMutations('m_cart', ['updateGoodsState', 'updateGoodsCount', 'updateRemoveGoods', 'updateAllChecked']),
			//全选/反选
			allRadioChange(checked) {
				this.updateAllChecked(checked)
			},
			//删除商品
			removeGoods(goods) {
				this.updateRemoveGoods(goods)
			},
			//商品数量改变时
			numChange(goods) {
				//修改商品数量
				this.updateGoodsCount(goods)
			},
			//切换goods_state状态
			goodsStateChange(goods) {
				console.log(goods)
				//更改选择状态
				this.updateGoodsState(goods)
			}
		}
	}
</script>

<style lang="scss">
	page {
		padding-bottom: 50px;
	}

	.settle {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
	}

	.cart {
		.cart-title {
			height: 40px;
			border-bottom: 1px solid #eee;
			display: flex;
			align-items: center;
			padding-left: 6px;
			font-size: 12px;

			text {
				margin-left: 6px;
			}
		}
	}

	.empty-box {
		display: flex;
		flex-direction: center;
		align-items: center;
		padding-top: 100px;
		font-size: 12px;
		color: gray;

		.image-box {
			width: 120px;
			height: 120px;
			border-radius: 50%;
			overflow: hidden;
			margin-bottom: 10px;

			image {
				width: 120px;
				height: 120px;
			}
		}
	}
</style>
